import React,{Component} from 'react';
import './user.css';
import {queryUser} from "../../api/user";

export default class User extends Component {

  state = {
    user:{},
  };

  async componentDidMount(){
    let {data:user} = await queryUser();
    this.setState({user});
  }
  logout = () => {
    window.localStorage.removeItem('user');
    this.props.history.push('/login')
  };

  render(){
    let {user:{nikename,fans,follow,icon}} = this.state;
    return (
      <div id="content">
        <div id="header">
          <h2><img src={icon} alt=""/></h2>
          <div className="user-box">
            <a href="#nikename">{nikename}</a>
            <a href="#lgoout" onClick={this.logout}>注销</a>
          </div>
          <ul className="clear">
            <li>
              <span>{follow}</span>
              <p>关注</p>
            </li>
            <li>
              <span>{fans}</span>
              <p className="end">粉丝</p>
            </li>
          </ul>
        </div>
        <div className="docList">
          <ul>
            <li className="gk-text">
              <i></i>
              <p>公开博文</p>
              <b></b>
              <span>0</span>
            </li>
            <li className="mm-text">
              <i></i>
              <p>秘密博文</p>
              <b></b>
              <span>0</span>
            </li>
            <li className="cg-text">
              <i></i>
              <p>草稿箱</p>
              <b></b>
              <span>0</span>
            </li>
            <li className="sc-text">
              <i></i>
              <p>收藏夹</p>
              <b></b>
              <span>0</span>
            </li>
            <li className="my_cz">
              <i></i>
              <p>收藏夹</p>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}